// static/js/common_json.js
// Json 格式化, 美化


import { showAlertNew } from './common.js';


// Json 的 key 排序 :
export function sortKeysRecursive(obj) {
    if (Array.isArray(obj)) {
        return obj.map(item => sortKeysRecursive(item));
    } else if (typeof obj === 'object' && obj !== null) {
        return Object.keys(obj).sort().reduce((acc, key) => {
            acc[key] = sortKeysRecursive(obj[key]);
            return acc;
        }, {});
    }
    return obj;
}

// 美化 Json : 颜色
export function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|\d+)/g, function (match) {
        let cls = 'json-value';
        if (match.startsWith('"')) {
            cls = /:$/.test(match) ? 'json-key' : 'json-string';
        } else if (/true|false/.test(match)) {
            cls = 'json-boolean';
        } else if (/null/.test(match)) {
            cls = 'json-null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

// 格式化 Json : 缩进
export function beautifyJson(jsonDataId, formattedJsonId) {
    const jsonDataElement = document.getElementById(jsonDataId);
    const jsonData = jsonDataElement.textContent || jsonDataElement.innerText;
    const formattedJsonArea = document.getElementById(formattedJsonId);
    try {
        const jsonObject = JSON.parse(jsonData);
        const formattedJson = JSON.stringify(jsonObject, null, 4); // 缩进4个空格
        formattedJsonArea.innerHTML = syntaxHighlight(formattedJson);
        jsonDataElement.innerHTML = syntaxHighlight(formattedJson);
        showAlertNew('Json 美化成功');
    } catch (e) {
        try {
            const dictString = jsonData
                .replaceAll("'", '"')
                .replace(/None/g, 'null') // 替换 None 为 null
                .replace(/True/g, 'true') // 替换 True 为 true
                .replace(/False/g, 'false'); // 替换 False 为 false
            const dictObject = JSON.parse(dictString);
            const formattedDict = JSON.stringify(dictObject, null, 4); // 缩进4个空格
            formattedJsonArea.innerHTML = syntaxHighlight(formattedDict);
            jsonDataElement.innerHTML = syntaxHighlight(formattedDict);
            showAlertNew('Python dict 美化成功');
        } catch (e) {
            formattedJsonArea.textContent = '无效的 JSON 或 Python dict 数据';
            showAlertNew('美化失败');
        }
    }
}

// Json 格式化 : ( 未使用 )
export function formatJson(json) {
    const jsonString = JSON.stringify(json, null, 2); // 2 是缩进空格数
    return syntaxHighlight(jsonString);
}

// JSON 格式化，支持展开/折叠
export function beautifyJsonZoom(inputId, outputId) {
    // inputId 美化显示
    // outputId 美化, 可控制是否隐藏并显示

    const jsonInputElement = document.getElementById(inputId)
    const jsonInput = jsonInputElement.textContent || jsonInputElement.innerText;

    try{
        // 在原输入框, 美化 Json :
        const jsonData = JSON.parse(jsonInput);
        console.log(jsonData)
        const formattedJson = JSON.stringify(sortKeysRecursive(jsonData), null, 4);
        console.log(formattedJson)
        jsonInputElement.innerHTML = syntaxHighlight(formattedJson);
        // 在右输入框, 实现可隐藏和显示 Json :
        document.getElementById(outputId).innerHTML = createJsonHtml(jsonData);
        showAlertNew('Json 美化成功');
    }catch(e){
        // 可能是 Python 的 Dict :
        try{
            const jsonString = jsonInput
                .replaceAll("'", '"') // 替换单引号为双引号
                .replace(/None/g, 'null') // 替换 None 为 null
                .replace(/True/g, 'true') // 替换 True 为 true
                .replace(/False/g, 'false'); // 替换 False 为 false

            // 在原输入框, 美化 Json :
            const jsonData = JSON.parse(jsonString);
            const formattedJson = JSON.stringify(jsonData, null, 4);
            jsonInputElement.innerHTML = syntaxHighlight(formattedJson);

            // 在右输入框, 实现可隐藏和显示 Json :
            document.getElementById(outputId).innerHTML = createJsonHtml(jsonData);
            showAlertNew('Json 美化成功');

        }catch(e){
            document.getElementById(outputId).textContent = '无效的 JSON 或 Python dict 数据';
            showAlertNew('美化失败');
        }
    }
}

// 生成带有展开/折叠功能的 HTML
export function createJsonHtml(json, indent = 0) {
    // 控制左边距,  indent 默认为 0 ,每层递增 1 :
    let html = '<ul style="list-style-type:none; padding-left: ' + indent + 'px;">';
    // 扩展和隐藏处理, 如果是 JsonObject / JsonList, 则需要添加隐藏按钮 ( - ), 如果是字符串, 则直接显示 :
    for (let key in json) {
        if (typeof json[key] === 'object' && json[key] !== null) {
            if(!isNaN(key)){
                // 如果是 JsonList, 则索引以墨绿色显示 :
                html += `<li><span class="json-toggle" style="cursor: pointer;margin-left: ${indent}px;" onclick="toggleJson(this)">-</span><span class="json-index">${key}:</span><div class="json-nested" style="margin-left: ${indent}px;">${createJsonHtml(json[key], indent)}</div></li>`;
            }else{
                // 如果是 JsonObject, 则 Key 以红色显示, 且缩进递增 4 :
                indent = indent + 4
                html += `<li><span class="json-toggle" style="cursor: pointer;margin-left: ${indent}px;" onclick="toggleJson(this)">-</span><span class="json-key">${key}:</span><div class="json-nested" style="margin-left: ${indent}px;">${createJsonHtml(json[key], indent)}</div></li>`;
            }
        } else {
            // html += `<li><span style="margin-left: ${indent}px;"></span><span class="json-key">${key} : </span><span class="json-value">${json[key]}</span></li>`;
            html += `<li><span ></span><span class="json-key">${key} : </span><span class="json-value">${json[key]}</span></li>`;
        }
    }
    html += '</ul>';
    return html;
}

// 展开/折叠功能
export function toggleJson(element) {
    const nested = element.nextElementSibling.nextElementSibling;
    if (nested.style.display === 'none') {
        nested.style.display = 'block';
        // element.innerHTML = '&#x25BC;';  // 展开状态 (∨)
        // element.innerHTML = '∨';  // 展开状态 (∨)
        element.innerHTML = '-';  // 展开状态 (∨)
    } else {
        nested.style.display = 'none';
        // element.innerHTML = '&#x25B6;';  // 折叠状态 (>)
        // element.innerHTML = '>';  // 折叠状态 (>)
        element.innerHTML = '+';  // 折叠状态 (>)
    }
}


// 挂载到 window 对象 :
window.syntaxHighlight = syntaxHighlight; // Json 颜色
window.beautifyJson = beautifyJson; // Json 缩进
window.formatJson = formatJson; // Json 格式化
window.beautifyJsonZoom = beautifyJsonZoom; // Json 格式化
window.createJsonHtml = createJsonHtml; // Json 格式化
window.toggleJson = toggleJson; // 展开和隐藏
